<template>
  <div>
    <navbar @parentevent="handleChange" />
    <button @click="state.isShow=!state.isShow">parent-click</button>
    <sidebar v-if="state.isShow" />
  </div>
</template>

<script>
import navbar from './components/NavBar'
import sidebar from './components/SideBar'
import { reactive } from 'vue'

export default {
  components: {
    navbar, sidebar
  },
  setup () {
    const state = reactive({
      isShow: true
    })

    const handleChange = () => {
      state.isShow = !state.isShow
    }

    return {
      state,
      handleChange
    }
  }
}
</script>
